import React, { Component } from 'react';
import {
  View, StyleSheet, Image,
} from 'react-native';
import { Text } from 'native-base';

class ImageItem extends Component {
  /**
   * @param {Object} props.item
   * @param {String} props.item.label  如果不传入label则占满整个行
   * @param {Array} props.item.value
   * @param {Function} props.item.render
   */
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  /**
   * 展示图片
  */

  _showImg = () => {
    if (this.props.item.label) { // 需展示左侧文字
      return this._showImgWithLabel();
    }
    return (
      <View>
        {this._showImgWithoutLabel()}
      </View>
    );
  }

  /**
   * 展示带左侧图片的图片信息
   */

  _showImgWithLabel = () => (
    <View>
      <View style={styles.imgLabel}>
        <Text style={styles.imgLabelFontStyle}>{this.props.item.label}</Text>
      </View>
      <View style={styles.imgContent}>
        {this._showImgWithoutLabel()}
      </View>
    </View>
  )

  /**
   * 展示不带左侧图片的，即纯图片列表的图片信息
   */

  _showImgWithoutLabel = () => {
    if (this.props.item.render) {
      const renderItem = this.props.item.render(this.props.item);
      return (
        <View style={styles.imgItemContent}>
          {renderItem}
        </View>
      );
    }
    const imgList = this.props.item.value;
    if (!imgList || !imgList.length) {
      return [];
    }
    return this._getImage(imgList);
  }

  /**
   * 获取图片的domlist
  */
  _getImage = (imgList) => {
    const resultList = [];
    for (let i = 0; i < imgList.length; i += 1) {
      resultList.push(
        <View style={styles.imgItemContent} key={i}>
          <Image
            style={styles.imgItem}
            source={{ uri: imgList[i] || '../../../assets/images/no-pic.png' }}
          />
        </View>,
      );
    }
    return resultList;
  }

  render() {
    return (
      <View>
        {this._showImg()}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imageContent: {
  },
  imgLabel: {
    marginBottom: 5,
  },
  imgLabelFontStyle: {
    color: '#ffffff',
  },
  imgContent: {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  imgItemContent: {
    width: '32%',
  },
  imgItem: {
    width: '100%',
    height: '100%',
  },
});

export default ImageItem;
